<!DOCTYPE html>
<html>
    <head>
        <title>template</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="./vendor/avalon/avalon.js" ></script>
        <style>
            
        </style>
        <script type="text/javascript">
            avalon.templateCache["aaa.html"] = "<strong>dddddddddddd</strong>"
            avalon.templateCache["bbb.html"] = "<em>555555555555</em>"

            var model = avalon.define({
                $id: "test",
                adjust: function(tmpl) {
                    return tmpl +"  "+ (new Date - 0)
                },
                aaa: "aaa.html",
                change: function() {
                    model.aaa = model.aaa === "aaa.html" ? "bbb.html" : "aaa.html"
                }
            })
        </script>
    </head>
    <body>
        <!-- avalon.templateCache，所有ms-include-src加载的模板都会缓存在这里，从而有效地减少请求数。
        并且这个东西还有一个额外的好处，我们的JS与CSS最终会压缩合并，对于这些模板我们也想把它们合并到JS文件里面，它就有用武之地了。这也是我们在第一节看到的那样，把requirejs加载回来的模板都放在avalon.templateCache里，与ms-include-src一起使用了。 -->
        
        <div ms-controller="test">
            <div ms-include-src="aaa" data-include-loaded="adjust"></div>
            <button type="button" ms-click="change">点我切换模板</button>
        </div>



    </body>
</html>
